<template>
  <div class="singer-detail text-white bg-black">
    <div class="d-flex flex-wrap jc-center">
      <div class="album-cover w100 text-center mt-3 mb-2">
        <div @click="backToAlbum" class="position-f pl-4">
          <i class="iconfont" style="font-size: 1.6rem;">&#xe64f;</i>
        </div>
        <img :src="artistInfo.img1v1Url" style="width: 240px;">
      </div>
      <div>
        <div class="album-name2 w100 text-l mt-2 mb-1">{{artistInfo.name}}</div>
      </div>
      <div class="text-center mt-3 w100">
        <textarea cols="39" rows="4" class="bg-black text-white text-xxs"
        style="text-align: justify; border: none; overflow-y: scroll;">{{artistInfo.briefDesc}}</textarea>
      </div>
      <div style="width: 260px;">
        <div class="w100 mt-5 mb-3 text-weight-6">歌曲列表</div>
        <!-- <SongsList :albumSongs="GET_ALBUM_SONG"></SongsList> -->
        <!-- 热门歌曲 -->
        <div>
          <ul class="d-flex flex-wrap jc-start">
          	<li v-for="(item,index) in singerSongsList" class="w100 mb-2" @click="getSingerMusicId(item.id)">
              <div class="songindex text-darkgray mr-2">{{index+1}}</div>
              <span class="iconfont">&#xe616; {{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  import tools from '@/assets/js/tools.js'
  export default {
    data() {
      return {
        artistInfo: [],
        singerSongsList: []
      }
    },
    mounted() {
      this.getSingerSongs()
    },
    methods: {
      ...mapMutations(['SET_MUSIC_URL','SET_MUSIC_NAME','SET_MUSIC_LYRIC','SET_MUSIC_TIME']),
      backToAlbum() {
        this.$router.push('/singer')
      },
      async getSingerSongs() {
        const { data: res } = await this.$http.get('/artists',{params: { id: this.$route.query.id }})
        this.artistInfo = res.artist
        this.singerSongsList = res.hotSongs
      },
      async getSingerMusicId(id) {
        const {data: result} = await this.$http.get('/lyric?id='+id)
        let lyricRes = tools.handleLyric(result.lrc.lyric)
        this.SET_MUSIC_LYRIC(lyricRes.lyricArr)
        this.SET_MUSIC_TIME(lyricRes.timeArr)
        const {data: res} = await this.$http.get('/song/url?id='+id)
        const {data: resu} = await this.$http.get('/song/detail?ids='+id)
        this.SET_MUSIC_URL(res.data[0].url)
        this.SET_MUSIC_NAME(resu.songs[0].name)
      }
    }
  }
</script>

<style scoped>
	.singer-detail{
		min-height: 100%;
    width: 100%;
		position: absolute;
		top: 9.8rem;
	}
	.songindex{
		width: 1rem;
		display: inline-block;
	}
</style>
